امروز با پست جدیدی از سری پست های آموزش طراحی سایت همراه شما هستیم. در این پست متدهای کاربردی برای تاریخ در جاوا اسکریپت را مورد بررسی قرار می دهیم.
متدهای شی date به برنامه نویس اجازه ی بدست آوردن و تنظیم (مقدار) تاریخ و زمان را می دهد.
این تابع تعداد ثانيه های سپری شده از تاريخ اول ژانويه سال 1970 تا به امروز را بر می گرداند : 01.01.1970
مثال 1 :
< script>
var d = new Date();
document.getElementById("demo") = d.getTime();
< /script>
این تابع شماره ی سال جاری را (به صورت چهار رقمی) بر می گرداند.
مثال 2 :
< script>
var d = new Date();
document.getElementById("demo") = d.getFullYear();
< /script>
شماره ی روز جاری در هفته را برمی گرداند (6-0).
مثال 3 :
< script>
var d = new Date();
document.getElementById("demo") = d.getDay();
< /script>
نکته : جاوا اسکریپت اولین روز هفته (0) را یکشنبه در نظر می گیرد.
می توان با استفاده از آرایه ای از اسم ها و تابع ()getDay، روزهای هفته را با اسم شان برگرداند.
مثال 4 :
< script>
var d = new Date();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById("demo") = days[d.getDay()];
< /script>
این متد شی date را روی تاریخ مشخصی تنظیم می کند، در مثال زیر تاریخ به ژانویه ی 14، 2020 تنظیم شده است.
مثال 5 :
< script>
var d = new Date();
d.setFullYear(2020, 0, 14);
document.getElementById("demo") = d;
< /script>
تابع ()setDate روز ماه مربوطه را تنظیم (مقداردهی) می کند (31-1).
مثال 6 :
< script>
var d = new Date();
d.setDate(15);
document.getElementById("demo") = d;
< /script>
با استفاده از این متد همچنین می توان روز به یک تاریخ قبلی افزود.
مثال 7 :
< script>
var d = new Date();
d.setDate(d.getDate() + 50);
document.getElementById("demo") = d;
< /script>
چنانچه اضافه کردن روز باعث شود ماه یا سال تغییر پیدا کنند، شی date خود به صورت اتوماتیک تغییرات وارد آمده را مدیریت می کند.
چنانچه یک رشته ی معتبر date به صورت رشته یا string دارید که می خواهید به میلی ثانیه تبدیل شود، در آن صورت می توانید از متد Date.parse() استفاده کنید. تابع ()Date.parse تعداد میلی ثانیه های (سپری شده) بین تاریخ مورد نظر و تاریخ اول ژانویه ی سال 1970 را برمی گرداند.
مثال 8 :
< script>
var msec = Date.parse("March 21, 2012");
document.getElementById("demo") = msec;
< /script>
در مرحله ی بعد می توانید با استفاده از مقدار بازگشتی رشته را به یک شی date تبدیل کنید.
مثال 9 :
< script>
var msec = Date.parse("March 21, 2012");
var d = new Date(msec);
document.getElementById("demo") = d;
< /script>
تاریخ ها را می توان به راحتی با یکدیگر مقایسه کرد. مثال زیر تاریخ امروز را با تاریخ January 14، 2100 مقایسه می کند.
مثال 10 :
var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2100, 0, 14);
if (someday > today) {
text = "Today is before January 14, 2100."
} else {
text = "Today is after January 14, 2100."
}
document.getElementById("demo") = text;
با دیگر مقاله های ما در زمینه آموزش طراحی سایت همراه ما باشید..
آموزش برنامه نویسیآموزش طراحی سایت,طراحی سایت,آموزش جاوااسکریپت,دوره آموزش طراحی سایت,متد های تاریخ در جاوا اسکریپت,...نویسنده : پیمان کلانتری بازدید : 201 تاريخ : چهارشنبه 30 مهر 1399 ساعت: 0:41
امروز با مقاله جدیدی از سری مقاله های آموزش طراحی سایت در کنار شما عزیزان هستیم. در این مقاله سعی داریم به آموزش سیستم گرید در بوت استرپ 4 بپردازیم.
سیستم گرید بندی (Bootstrap 4 Grid System) بوت استرپ 4 به شما اجازه می دهد تا 12 خانه یا ستون (column) در یک سطر داشته باشید. اگر نمی خواهید از 12 خانه هر سطر به صورت تک تک استفاده کنید، می توانید از ترکیب آنها، خانه یا ستون های بزرگتری ایجاد نمایید. شکل زیر، مفهوم کلی گرید سیستم بوت استرپ 4 را نشان می دهد :
سیستم گرید بندی بوت استرپ 4، کاملا واکنش گرا یا ریسپانسیو (Responsive) است و ستون ها در یک سطر، بر حسب عرض و اندازه صفحه نمایش، خود را مرتب کرده و بهترین حالت نمایش را ارائه می دهند. برای مثال در یک صفحه نمایش بزرگ، می توانید محتویات را در 3 ستون پهن نمایش دهید، در حالی که همان 3 ستون در یک صفحه موبایل، باریکتر شده، هر کدام در یک سطر کامل قرار گرفته و بر روی هم نمایش داده می شوند.
بوت استرپ 4، دارای 5 کلاس مختلف برای گریدبندی خانه در صفحه نمایش های مختلف است :
کلاس های فوق را می توایند جهت ایجاد قالب و چیدمان های دینامیک و فلکسیبل (flexible layouts)، با هم ترکیب کرده و استفاده نمایید.
نکته : تأثیرگذاری کلاس ها از اندازه کوچک به بزرگ است، یعنی اگر قانونی برای سایز کوچکتر تعیین کنید، به سایزهای بزرگ هم تعمیم پیدا می کند. برای مثال اگر می خواهید عرض یکسانی را برای یک عنصر در اندازه های sm و md، تعیین نمایید، کافی است مقدار آن را در حالت sm مشخص کنید و خود به خود در حالت md نیز اجرا می شود.
در لیست زیر، برخی از مهم ترین قوانین و شرایط ی که در هنگام کار با گرید سیستم در bootstrap 4 بایستی رعایت نمایید را معرفی کرده ایم :
راهنمایی : اگر در مورد FlexBox، آشنایی کافی ندارید، به بخش آموزش فلکس باکس در سایت تحلیل داده بروید.
نکته : گزینه FlexBox در مرورگرهای IE9 و قبلتر، پشتیبانی نمی شود. لذا اگر پشتیبانی مرورگرهای IE8 و IE9 ار سایت تان برای شما مهم است، از بوت استرپ 3 استفاده نمایید. بوت استرپ 3، پایدارترین نسخه بوت استرپ بوده و هنوز توسط تیم توسعه دهنده جهت رفع باگ ها احتمالی، ارائه مستندات آموزشی و ... پشتیبانی می شود. ولی قابلیت های جدید از جمله FlexBox به آن اضافه نشده است.
در کد مثال عملی زیر، یک مثال ساده و پایه از نحوه گریدبندی خانه ها در بوت سترپ 4 را نشان داده ایم. کد مثال را مطالعه کرده، در ادامه به تشریح نکات مهم آن پرداخته ایم :
مثال گرید سیستم
< !-- Control the column width, and how they should appear on different devices -->
< div class="row">
< div class="col-*-*">< /div>
< div class="col-*-*">< /div>
< div class="col-*-*">< /div>
< /div>
< !-- Or let Bootstrap automatically handle the layout -->
< div class="row">
< div class="col">< /div>
< div class="col">< /div>
< div class="col">< /div>
< div class="col">< /div>
< /div>
در مثال اول، به وسیله تگ div با کلاس row، یک سطر افقی ایجاد کرده ایم. سپس به تعداد مورد نظر، ستون های دلخواه را با تگ هایی با کلاس col-*-*، درون آن قرار داده ایم. * اول در کلاس فوق، تعیین کننده عرض صفحه نمایش هدف است که می تواند یکی از مقادیر sm، md، lg و یا xl را داشته باشد. * دوم هم تعیین کننده عرض ستون بر حسب عددی از 1 تا 12 است که مثلا 6، یعنی 6 واحد از 12 خانه را اشغال کند.
در مثال دوم، به جای تعیین عدد برای هر ستون در کلاس col، اجازه داده ایم تا خود بوت استرپ قالب (layout) آن را با ایجاد ستون های هم عرض مدیریت کند. مثلا کاربرد در عنصر با کلاس col، یعنی اینکه از 100 درصد عرض، به هر ستون 50 درصد اختصاص بده. به همین ترتیب با 3 عنصر کلاس Col، یعنی عرض هر کدام 33 درصد و با چهار ستون عرض هرکدام 25 درصد، عرض کل سطر باشد.
همچنین در کلاس فوق می توانید از حالت col-sm|md|lg|xl نیز استفاده نمایید تا در هر اندازه صفحه نمایش، نحوه قرارگیری ستون ها را به دقت تعیین نمایید.
مناسب برای :
داشتن offset
ترتیب قرار گرفتن ستون ها
با دیگر مقاله های آموزشی در زمینه آموزش طراحی سایت همراه ما باشید..
آموزش برنامه نویسیآموزش طراحی سایت,آموزش Bootstrap 4,دوره آموزش طراحی سایت,آموزش Bootstrap,گرید سیستم در Bootsratp 4,کلاسهای سیستم grid در Bootstrap 4,طراحی سایت,...نویسنده : پیمان کلانتری بازدید : 241 تاريخ : سه شنبه 29 مهر 1399 ساعت: 0:00
امروز با مقاله دیگری از آموزش طراحی سایت همراه شما هستیم. در این مقاله سعی داریم تبدیل دو بعدی در CSS3 را با یکدیگر مورد بررسی قرار داده و پس از تبدیل، برخی متدها را بر روی آن پیاده سازی کنیم و تغییرات ایجاد شده را با یکدیگر مشاهده و تحلیل کنیم.
خواص transform در CSS3 به طراح وب امکان می دهند عناصر دلخواه را منتقل کرده, چرخانده, مقیاس بندی و همچنین در صورت لزوم اریب دار کند (با زوایای مختلف بچرخانید). خاصیت transformation (تبدیل) در واقع قابلیت تغییر شکل, اندازه و موقعیت المان مورد نظر را فراهم می آورد. CSS3 همچنین قابلیت تبدیل دو بعدی و سه بعدی عناصر را پشتیبانی می کند.
در این بخش با توابع تبدیل دوبعدی عناصر (2D transformation methods) در CSS3 آشنا خواهید شد :
متد translate() یک عنصر را از موقعیت فعلی آن حرکت می دهد (البته بر اساس پارامترهایی که برای محورهای X و Y تعیین شده است). در واقع با بهره گیری از این متد می توان المان دلخواه را کپی کرده و آن را به مکانی دیگر انتقال داد. مثال زیر تگ یا عنصر div را به اندازه ی 50 پیکسل به سمت راست و 100 پیکسل پایین تر از موقعیت جاری آن حرکت می دهد :
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
متد rotate() بسته به درجه ی تعیین شده یک عنصر را در جهت عقربه ی ساعت یا در جهت خلاف آن می چرخاند (دوران می کند). مثالی که زیر مشاهده می کنید المان div را به اندازه ی 20 درجه در جهت حرکت عقربه ی ساعت می چرخاند :
div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
استفاده از مقادیر منفی (negative values) باعث می شود عنصر خلاف عقربه ی ساعت چرخانده شود. مثال زیر المان div را 20 درجه در خلاف جهت عقربه ی ساعت حرکت می دهد (می چرخاند) :
div {
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
تابع scale() اندازه ی المان را افزایش یا کاهش می دهد (کوچک و بزرگ می کند). این کار بر اساس پارامترهایی که برای طول و عرض (height ,width) تعریف می شود صورت می پذیرد. مثال زیر عرض یا پهنای المان div را دو برابر عرض و پهنای اصلی و طول یا ارتفاع آن را سه برابر طول اصلی آن المان تعریف می کند
div {
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}
نمونه ی زیر عنصر div را نصف عرض و ارتفاع اصلی خود عنصر تعیین می کند :
div {
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}
می توانید عنصر مورد نظر خود را در 2 جهت عمودی و افقی به صورت 3 بعدی، بر حسب واحد deg و اندازه ی مشخص شده بچرخوانید. به عبارت دیگر به کمک این متد می توان عنصر مورد نظر را با زوایای مختلف حتی 360 بچرخانید. مثال زیر المان div را به اندازه ی 20 درجه در امتداد محور x (x-axis) و در امتداد محور Y به اندازه ی 10 درجه می چرخاند می کند :
div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
متد skewX() یک المان را در امتداد محور X بر حسب واحد deg می چرخاند. br نمونه ی زیر المان div را در امتداد محور X به اندازه ی 20 درجه می چرخاند :
div {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
متد skewY() یک عنصر را در امتداد محور Y به اندازه ی درجه ی زاویه ی تعیین شده (بر حسب واحد deg) می چرخاند. مثال زیر عنصر div را به اندازه ی 20 درجه در امتداد محور Y می چرخاند :
div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
حال چنانچه پارامتر دومی تعیین نشده باشد, مقداری 0 خواهد داشت. بنابراین مثال زیر المان div را به اندازه 20 درجه در امتداد محور X می چرخاند :
div {
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
متد matrix() کلیه ی متدهای تبدیل دو بعدی را در یک تابع واحد می گنجاند (ادغام می کند). تابع matrix() 6 مقدار می گیرد, که شامل توابع ریاضی (mathematics functions) می شود و به شما امکان می دهد المان های خود را بچرخانید, مقایس بندی (کوچک و بزرگ) کنید, حرکت دهید (translate: انتقال دادن) و همچنین آن ها را مطابق نیاز با زوایای مختلف بچرخانید (skew) کنید :
div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
تمامی خاصیت های transform CSS3 به ترتیب زیر می باشند :
متدهای تبدیل دو بعدی نیز به شرح زیر هستند :
با مقاله های دیگر ما در زمینه آموزش طراحی سایت همراه باشید...
آموزش برنامه نویسیآموزش طراحی سایت,تبدیل دو بعدی و سه بعدی در CSS3,دوره آموزش طراحی سایت,آموزش css3,متدهای تبدیل دو بعدی در CSS3,...نویسنده : پیمان کلانتری بازدید : 199 تاريخ : يکشنبه 27 مهر 1399 ساعت: 22:25